<template>
	<div class="box">
		<el-card class="card-css">
			<div class="zhpj">
				<span class="zhpj-span">报表打印</span>
			</div>

			<div class="table-css">
				<div class="btn-css">
					<el-button
						type="success"
						@click="dialogVisible = !dialogVisible"
						>自定义</el-button
					>
				</div>
				<div class="select01">
					<el-select placeholder="商场">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="select02">
					<el-select placeholder="一小时">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="block">
					<el-date-picker
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>

				<div class="btn-01">
					<el-button type="primary" @click="exportExcel"
						>下 载</el-button
					>
				</div>
				<!-- <div class="btn-02">
					<el-button type="primary">打 印</el-button>
				</div> -->
			</div>

			<div class="table">
				<el-table
					:row-key="getRowKeys"
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column
						v-if="tableCol.time"
						prop="createTime"
						label="时间"
						width="150"
					/>
					<el-table-column
						v-if="tableCol.zh"
						prop="comprehensiveIndex"
						label="综合指数"
						width="120"
					>
						<template v-slot:header>综合指数 </template>
					</el-table-column>
					<el-table-column
						v-for="i in tableCol.data"
						:key="i.id"
						:label="i.label"
					>
						<el-table-column
							v-for="opt in i.children"
							:key="opt.id"
							:prop="opt.prop"
							:label="opt.label"
						>
						</el-table-column>
					</el-table-column>
				</el-table>
				<!-- <div class="pagination">
					<el-pagination v-model:currentPage="currentPage3" v-model:page-size="pageSize3" :small="small"
						:disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div> -->
			</div>
		</el-card>

		<!-- 自定义弹框 -->
		<el-dialog
			v-model="dialogVisible"
			append-to-body
			title="自定义"
			ref="dialog"
			@opened="open"
			width="504px"
		>
			<div class="checkbox-div">
				<div>
					<el-checkbox v-model="ckAll" label="全选" size="large" />
				</div>

				<div>
					<el-checkbox v-model="time1" label="时间" size="large" />
				</div>
				<div>
					<el-checkbox v-model="zh1" label="综合指数" size="large" />
				</div>
				<div>
					<el-tree
						:data="testdata"
						ref="tree"
						show-checkbox
						node-key="id"
						:props="defaultProps"
					>
					</el-tree>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false" class="quxiao-btn"
						>取消</el-button
					>
					<el-button type="primary" @click="saveProp" class="sava-btn"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import { ShushiList } from "@/api/model/end";
import FileSaver from "file-saver";
import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
let dialogVisible = ref(false);
let tree = ref(null);
let dialog = ref(null);

const testdata = ref([
	{
		id: 1,
		label: "温度°C",
	},
	{
		id: 2,
		label: "湿度%",
	},
	{
		id: 3,
		label: "CO₂ppm",
	},
	{
		id: 4,
		label: "PM2.5µg/m³",
	},
]);
const testdata1 = ref([
	{
		id: 1,
		label: "温度°C",
		children: [
			{
				id: 5,
				label: "室内",
				prop: "temperatureIndoor",
			},
			{
				id: 6,
				label: "室外",
				prop: "temperatureOutdoor",
			},
			{
				id: 7,
				label: "测点1",
				prop: "temperatureStationOne",
			},
			{
				id: 8,
				label: "测点2",
				prop: "temperatureStationTwo",
			},
		],
	},
	{
		id: 2,
		label: "湿度%",
		children: [
			{
				id: 9,
				label: "室内",
				prop: "humidityIndoor",
			},
			{
				id: 10,
				label: "室外",
				prop: "humidityOutdoor",
			},
			{
				id: 11,
				label: "测点1",
				prop: "humidityStationOne",
			},
			{
				id: 12,
				label: "测点2",
				prop: "humidityStationTwo",
			},
		],
	},
	{
		id: 3,
		label: "CO₂ppm",
		children: [
			{
				id: 13,
				label: "室内",
				prop: "coPpmIndoor",
			},
			{
				id: 14,
				label: "室外",
				prop: "coPpmOutdoor",
			},
			{
				id: 15,
				label: "测点1",
				prop: "coPpmStationOne",
			},
			{
				id: 16,
				label: "测点2",
				prop: "coPpmStationTwo",
			},
		],
	},
	{
		id: 4,
		label: "PM2.5µg/m³",
		children: [
			{
				id: 17,
				label: "室内",
				prop: "pmIndoor",
			},
			{
				id: 18,
				label: "室外",
				prop: "pmOutdoor",
			},
			{
				id: 19,
				label: "测点1",
				prop: "pmStationOne",
			},
			{
				id: 20,
				label: "测点2",
				prop: "pmStationTwo",
			},
		],
	},
]);

// 给table 一个key值 防止复用
const getRowKeys = (row) => {
	return row.id;
};
const defaultProps = {
	label: "label",
	children: "children",
};

let time1 = ref(true);

let zh1 = ref(true);

let tableCol = reactive({
	data: JSON.parse(sessionStorage.getItem("tb")) || toRaw(testdata1),
	time: sessionStorage.getItem("time")
		? JSON.parse(sessionStorage.getItem("time"))
		: true,
	zh: sessionStorage.getItem("zh")
		? JSON.parse(sessionStorage.getItem("zh"))
		: true,
});


const ckAll = computed({
	get() {
		return (
			time1.value &&
			zh1.value &&
			tree.value.getCheckedNodes().length === 4
		);
	},
	set(val) {
		if (val) {
			console.log(tree.value.getCheckedNodes(), "sss");
			tree.value.setCheckedNodes(testdata.value);
			time1.value = val;
			zh1.value = val;
		} else {
			tree.value.setCheckedKeys([], false);
			time1.value = val;
			zh1.value = val;
		}
	},
});

const tableData = ref([]);

const setData = () => {
	if (sessionStorage.getItem("tb")) {
		tableCol.data = JSON.parse(sessionStorage.getItem("tb"));
	}
	if (sessionStorage.getItem("time")) {
		tableCol.time = JSON.parse(sessionStorage.getItem("time"));
	}
	if (sessionStorage.getItem("zh")) {
		tableCol.zh = JSON.parse(sessionStorage.getItem("zh"));
	}
};
const open = () => {
	time1.value = tableCol.time;
	zh1.value = tableCol.zh;
	console.log(tableCol.data);
	tree.value.setCheckedNodes(tableCol.data);
	console.log(tree.value.getCheckedNodes(true, false));
};
const saveProp = () => {
	// 处理选择的节点数据
	// testdata.value = testdata1.value;
	let col = tree.value
		// 获取包括半选节点
		.getCheckedNodes(false, false)
		.map((item) => {
			
			return testdata1.value.find((i) => i.id === item.id);
		});

	sessionStorage.setItem("tb", JSON.stringify(col));
	sessionStorage.setItem("time", JSON.stringify(time1.value));
	sessionStorage.setItem("zh", JSON.stringify(zh1.value));

	setData();

	dialogVisible.value = false;
};
onMounted(() => {
	dialog.value.rendered = true;
	getShushiList();
	console.log(tableCol.data);
});
function exportExcel() {
	//需给表格定义一个id或者类名
	console.log("1111111111", XLSX);
	let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
	console.log("222");
	let wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(
			new Blob([wbout], { type: "application/octet-stream" }),
			"111.xlsx"
		); //***是自己导出文件时的命名，随意
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
	}
	return wbout;
}
const getShushiList = async () => {
	let res = await ShushiList();
	if (res.code == 200) {
		tableData.value = res.data;
	}
};
</script>

<style lang="less" scoped>
.box {
	display: flex;

	.card-css {
		flex: 1;
		width: 1760px;
		height: 817px;
		position: relative;

		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 100%;

			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}

		.table-css {
			display: flex;
			margin-top: 66px;
			justify-content: flex-end;

			.select01 {
				width: 100px;
			}

			.select02 {
				width: 100px;
				margin-right: 20px;
				margin-left: 20px;
			}

			.btn-01 {
				margin-left: 20px;
				margin-right: 20px;
			}

			.el-button {
				background-color: #8faadc;
				border-color: #8faadc;
			}

			.btn-css {
				flex-grow: 1;
			}
		}
	}

	.table {
		margin-top: 20px;

		.el-checkbox {
			top: 3px;
			margin-left: 5px;
		}
	}

	.pagination {
		display: flex;
		justify-content: flex-end;
	}
}

.sava-btn {
	border-color: #8faadc;
	background-color: #8faadc;
}

.quxiao-btn {
	border-color: #cccccc;
	background-color: #cccccc;
	color: #fff;
}

:deep(.el-dialog__title) {
	color: #4d62a5;
}

:deep(.el-tree-node.is-expanded > .el-tree-node__children) {
	display: inline-flex;
}

.checkbox-div > div {
	margin-bottom: 2px;
}

:deep(.el-tree-node__content) {
	margin-bottom: 8px;
}

:deep(.el-dialog__body) {
	border-top: 1px solid #e7eaf3;
	border-bottom: 1px solid #e7eaf3;
}
</style>
